<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="甘忠祥">
    <title>导航条</title>
</head>
<style>
    *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
    }
    ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    a{
        text-decoration: none;
         color: white; 
    }
    header{
        width: 100%;
        height: 60px;
        background-color: black;
    }
    .container{
        width: 1200px;
        margin: 0 auto;
    }
    .list{
        display: flex;
        
    }
    .list a{
        line-height: 60px;
        padding: 0 20px;
        /* position: relative; */
        
    }
    
    .list a:hover{
        color: darkgoldenrod;
    }

    .move-list li a{
        display: inline-block;
        height:50px;
        background-color: black;
        /* opacity: 0;    */
        /* position: absolute; */
    }
    .move-list{
         opacity: 0; 
    }
    .list>li:hover .move-list{
        opacity: 1;
    }
</style>
<body>
<header>
    <nav class="container">
        <ul class="list">
            <li><a href="#">会员首页</a></li>
            <li><a href="#" class="move">看电影</a>
                     <ul class="move-list">
                        <li><a href="#">华语大片</a></li> 
                        <li><a href="#">海外大片</a></li> 
                    </ul> 
                
             </li>
            <li><a href="#" class="tv">看剧</a>
                <ul class="move-list">
                    <li><a href="#">英剧</a></li>
                    <li><a href="#">美剧</a></li>
                    <li><a href="#">港剧</a></li>
                    <li><a href="#">韩剧</a></li>
                </ul>
                
            </li>
            <li><a href="#">看动漫</a></li>
            <li><a href="#">纪录片</a></li>
            <li><a href="#">德云社</a></li>
            <li><a href="#">看直播</a></li>
        </ul>
    </nav>
</header>
</body>
<script>
    // var lis = document.querySelectorAll('.list a');
    // var show = document.querySelector('.move-list a');
    // for(var i = 0; i < lis.length; i++){
    //     lis[i].onmouseover = function(){
    //         show.style.opacity = 1;
    //     }
    //     lis[i].onmouseout =function(){
    //         show.className = 'current';
    //     }
    // }
</script>
</html>